{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tabs",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/tab.tsx",
      "content": "'use client';\r\n\r\nimport React, {\r\n  ReactNode,\r\n  createContext,\r\n  useContext,\r\n  useState,\r\n  isValidElement,\r\n  useMemo,\r\n  useCallback,\r\n} from 'react';\r\nimport { cn } from '@/lib/utils';\r\nimport { AnimatePresence, motion } from 'motion/react';\r\n\r\n// Improved TypeScript interfaces with more specific types\r\ninterface TabContextType {\r\n  activeTab: string;\r\n  setActiveTab: (value: string) => void;\r\n  wobbly: boolean;\r\n  hover: boolean;\r\n  defaultValue: string;\r\n  prevIndex: number;\r\n  setPrevIndex: (value: number) => void;\r\n  tabsOrder: string[];\r\n}\r\n\r\nconst TabContext = createContext<TabContextType | undefined>(undefined);\r\n\r\n// Custom hook with memoization\r\nexport const useTabs = () => {\r\n  const context = useContext(TabContext);\r\n  if (!context) {\r\n    throw new Error('useTabs must be used within a TabsProvider');\r\n  }\r\n  return context;\r\n};\r\n\r\n// Props interfaces with more specific types\r\ninterface TabsProviderProps {\r\n  children: ReactNode;\r\n  defaultValue: string;\r\n  wobbly?: boolean;\r\n  hover?: boolean;\r\n}\r\n\r\ninterface TabsBtnProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  value: string;\r\n}\r\n\r\ninterface TabsContentProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  value: string;\r\n  yValue?: boolean;\r\n}\r\n\r\nexport const TabsProvider: React.FC<TabsProviderProps> = React.memo(\r\n  ({ children, defaultValue, wobbly = true, hover = false }) => {\r\n    // Use useCallback to memoize state setters\r\n    const [activeTab, setActiveTab] = useState(defaultValue);\r\n    const [prevIndex, setPrevIndex] = useState(0);\r\n\r\n    // Memoize tabs order to prevent unnecessary recalculations\r\n    const tabsOrder = useMemo(() => {\r\n      return React.Children.toArray(children)\r\n        .filter((child) => isValidElement(child) && child.type === TabsContent)\r\n        .map((child) => (child as React.ReactElement<any>).props.value);\r\n    }, [children]);\r\n\r\n    // Memoize context value to prevent unnecessary re-renders\r\n    const contextValue = useMemo(\r\n      () => ({\r\n        activeTab,\r\n        setActiveTab,\r\n        wobbly,\r\n        hover,\r\n        defaultValue,\r\n        setPrevIndex,\r\n        prevIndex,\r\n        tabsOrder,\r\n      }),\r\n      [\r\n        activeTab,\r\n        setActiveTab,\r\n        wobbly,\r\n        hover,\r\n        defaultValue,\r\n        prevIndex,\r\n        tabsOrder,\r\n      ]\r\n    );\r\n\r\n    return (\r\n      <TabContext.Provider value={contextValue}>{children}</TabContext.Provider>\r\n    );\r\n  }\r\n);\r\n\r\n// Memoized TabsBtn component\r\nexport const TabsBtn: React.FC<TabsBtnProps> = React.memo(\r\n  ({ children, className, value }) => {\r\n    const {\r\n      activeTab,\r\n      setPrevIndex,\r\n      setActiveTab,\r\n      defaultValue,\r\n      hover,\r\n      wobbly,\r\n      tabsOrder,\r\n    } = useTabs();\r\n\r\n    // Use useCallback to memoize the click handler\r\n    const handleClick = useCallback(() => {\r\n      setPrevIndex(tabsOrder.indexOf(activeTab));\r\n      setActiveTab(value);\r\n    }, [setPrevIndex, tabsOrder, activeTab, setActiveTab, value]);\r\n\r\n    return (\r\n      <motion.div\r\n        className={cn(\r\n          `cursor-pointer 2xl:p-2 p-2 2xl:px-4 px-2 rounded-md relative`,\r\n          className\r\n        )}\r\n        onFocus={() => hover && handleClick()}\r\n        onMouseEnter={() => hover && handleClick()}\r\n        onClick={handleClick}\r\n      >\r\n        {children}\r\n\r\n        <AnimatePresence mode='wait'>\r\n          {activeTab === value && (\r\n            <>\r\n              <motion.div\r\n                transition={{\r\n                  layout: {\r\n                    duration: 0.2,\r\n                    ease: 'easeInOut',\r\n                    delay: 0.2,\r\n                  },\r\n                }}\r\n                layoutId={defaultValue}\r\n                className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1'\r\n              />\r\n\r\n              {wobbly && (\r\n                <>\r\n                  <motion.div\r\n                    transition={{\r\n                      layout: {\r\n                        duration: 0.4,\r\n                        ease: 'easeInOut',\r\n                        delay: 0.04,\r\n                      },\r\n                    }}\r\n                    layoutId={defaultValue}\r\n                    className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1 tab-shadow'\r\n                  />\r\n                  <motion.div\r\n                    transition={{\r\n                      layout: {\r\n                        duration: 0.4,\r\n                        ease: 'easeOut',\r\n                        delay: 0.2,\r\n                      },\r\n                    }}\r\n                    layoutId={`${defaultValue}b`}\r\n                    className='absolute w-full h-full left-0 top-0 dark:bg-primary-base bg-white rounded-md z-1 tab-shadow'\r\n                  />\r\n                </>\r\n              )}\r\n            </>\r\n          )}\r\n        </AnimatePresence>\r\n      </motion.div>\r\n    );\r\n  }\r\n);\r\n\r\n// Memoized TabsContent component\r\nexport const TabsContent: React.FC<TabsContentProps> = React.memo(\r\n  ({ children, className, value, yValue }) => {\r\n    const { activeTab, tabsOrder, prevIndex } = useTabs();\r\n\r\n    // Memoize direction calculation\r\n    const isForward = useMemo(\r\n      () => tabsOrder.indexOf(activeTab) > prevIndex,\r\n      [tabsOrder, activeTab, prevIndex]\r\n    );\r\n\r\n    return (\r\n      <AnimatePresence mode='popLayout'>\r\n        {activeTab === value && (\r\n          <motion.div\r\n            initial={{ opacity: 0, y: yValue ? (isForward ? 10 : -10) : 0 }}\r\n            animate={{ opacity: 1, y: 0 }}\r\n            exit={{ opacity: 0, y: yValue ? (isForward ? -50 : 50) : 0 }}\r\n            transition={{\r\n              duration: 0.3,\r\n              ease: 'easeInOut',\r\n              delay: 0.5,\r\n            }}\r\n            className={cn('p-2 px-4 rounded-md relative', className)}\r\n          >\r\n            {children}\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n    );\r\n  }\r\n);\r\n\r\n// Add display names for better debugging\r\nTabsProvider.displayName = 'TabsProvider';\r\nTabsBtn.displayName = 'TabsBtn';\r\nTabsContent.displayName = 'TabsContent';\r\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/tabs/preview-tab.tsx",
      "content": "'use client';\r\nimport React, { useState } from 'react';\r\nimport { motion, AnimatePresence } from 'motion/react';\r\nimport Image from 'next/image';\r\nimport { TabsBtn, TabsContent, TabsProvider } from '@/components/ui/tab';\r\nconst effectArr = [\r\n  {\r\n    id: 1,\r\n    name: 'basic',\r\n  },\r\n  {\r\n    id: 2,\r\n    name: 'hover',\r\n  },\r\n  {\r\n    id: 3,\r\n    name: 'wobbly',\r\n  },\r\n];\r\nfunction index() {\r\n  const [checkEffect, setCheckEffect] = useState('basic');\r\n  return (\r\n    <>\r\n      <div className='flex bg-black dark:bg-gray-900 w-fit ml-auto mb-4 gap-1 p-1 rounded-md text-white'>\r\n        {effectArr?.map((effect, index) => {\r\n          return (\r\n            <>\r\n              <motion.button\r\n                onClick={() => setCheckEffect(effect?.name)}\r\n                className={`py-1 px-3 rounded-md capitalize relative `}\r\n              >\r\n                <span className='z-10 relative'>{effect?.name}</span>\r\n                {checkEffect === effect.name && (\r\n                  <motion.div\r\n                    transition={{\r\n                      layout: {\r\n                        duration: 0.2,\r\n                        ease: 'easeInOut',\r\n                      },\r\n                    }}\r\n                    layoutId={'magnetic'}\r\n                    className='absolute w-full h-full left-0 top-0 bg-[conic-gradient(from_90deg_at_50%_50%,#8494ff_0%,#3749be_50%,#7d8efc_100%)] rounded-md  z-1 tab-shadow'\r\n                  />\r\n                )}\r\n              </motion.button>\r\n            </>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      <div className='border bg-white/10 dark:bg-black/40 backdrop-blur-xs rounded-md p-4  relative'>\r\n        <TabsProvider\r\n          defaultValue={'design'}\r\n          wobbly={checkEffect === 'wobbly' ? true : false}\r\n          hover={checkEffect === 'hover' ? true : false}\r\n        >\r\n          <div className='flex justify-center mt-2'>\r\n            <div className='flex items-center w-fit dark:bg-[#1d2025] bg-gray-200 p-1 dark:text-white text-black rounded-md border'>\r\n              <TabsBtn value='design'>\r\n                <span className='relative z-2 uppercase sm:text-base text-xs'>\r\n                  design\r\n                </span>\r\n              </TabsBtn>\r\n              <TabsBtn value='collaborate'>\r\n                <span className='relative z-2 uppercase sm:text-base text-xs'>\r\n                  collaborate\r\n                </span>\r\n              </TabsBtn>\r\n              <TabsBtn value='share'>\r\n                <span className='relative z-2 uppercase sm:text-base text-xs'>\r\n                  share\r\n                </span>\r\n              </TabsBtn>\r\n              <TabsBtn value='publish'>\r\n                <span className='relative z-2 uppercase sm:text-base text-xs'>\r\n                  publish\r\n                </span>\r\n              </TabsBtn>\r\n            </div>\r\n          </div>\r\n          <TabsContent value='design'>\r\n            <div className='w-full'>\r\n              <Image\r\n                src={\r\n                  'https://images.unsplash.com/photo-1506097425191-7ad538b29cef?q=80&w=1000&auto=format&fit=crop'\r\n                }\r\n                width={1000}\r\n                height={1000}\r\n                alt='preview_img'\r\n                className='w-[850px] object-cover h-full mx-auto rounded-md'\r\n              />\r\n            </div>\r\n          </TabsContent>\r\n          <TabsContent value='collaborate'>\r\n            <div className='w-full'>\r\n              <Image\r\n                src={\r\n                  'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1000&auto=format&fit=crop'\r\n                }\r\n                width={1000}\r\n                height={1000}\r\n                alt='preview_img'\r\n                className='w-[850px] object-cover h-full mx-auto rounded-md'\r\n              />\r\n            </div>\r\n          </TabsContent>\r\n          <TabsContent value='share'>\r\n            <div className='w-full'>\r\n              <Image\r\n                src={\r\n                  'https://images.unsplash.com/photo-1665470909901-162912ec16f7?q=80&w=1000&auto=format&fit=crop'\r\n                }\r\n                width={1000}\r\n                height={1000}\r\n                alt='preview_img'\r\n                className='w-[850px] object-cover h-full mx-auto rounded-md'\r\n              />\r\n            </div>\r\n          </TabsContent>\r\n          <TabsContent value='publish'>\r\n            <div className='w-full'>\r\n              <Image\r\n                src={\r\n                  'https://images.unsplash.com/photo-1694022861804-840f61d1c452?q=80&w=1000&auto=format&fit=crop'\r\n                }\r\n                width={1000}\r\n                height={1000}\r\n                alt='preview_img'\r\n                className='w-[850px] object-cover h-full mx-auto rounded-md'\r\n              />\r\n            </div>\r\n          </TabsContent>\r\n        </TabsProvider>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default index;\r\n",
      "type": "registry:component"
    }
  ]
}